<template>
  <div class="content_index">
    <div class="ci_header">
      <div class="ci_left sec-title">
        <el-icon
          style="vertical-align: middle; display: unset; cursor: pointer"
          @click="backList()"
          ><Back
        /></el-icon>
        <span>{{ route.name }}</span>
      </div>
    </div>
    <div class="ci_content" style="margin: 12px 16px">
      <el-form
        label-position="right"
        ref="DetailFormRef"
        label-width="140px"
        style="width: 100%"
        :model="DetailForm"
      >
        <el-form-item label="取证编号：">
          {{ DetailObj.evidenceId }}
        </el-form-item>
        <el-form-item label="取证名称：">
          {{ DetailObj.evidenceName }}
        </el-form-item>
        <el-form-item label="取证类型：">
          {{
            DetailObj.obtainType === "0"
              ? "网页取证"
              : DetailObj.obtainType === "1"
              ? "截屏取证"
              : DetailObj.obtainType === "2"
              ? "录屏取证"
              : "--"
          }}
        </el-form-item>
        <el-form-item label="交易哈希：">
          {{ DetailObj.txId }}
        </el-form-item>
        <el-form-item label="交易时间：">
          {{ DetailObj.txTime }}
        </el-form-item>
        <el-form-item label="取证状态：">
          {{
            DetailObj.status === "0"
              ? "取证中"
              : DetailObj.status === "1"
              ? "取证成功"
              : "--"
          }}
        </el-form-item>
        <el-form-item label="区块号：">
          {{ DetailObj.blockNum }}
        </el-form-item>
        <el-form-item label="区块哈希：">
          {{ DetailObj.blockHash }}
        </el-form-item>
        <el-form-item label="交易内容：">
          <div class="box">
            <div class="left_txContent">
              {{ DetailObj.txContent }}
            </div>
            <div class="rigth_txContent">
              <pre>{{ formatTxContent }}</pre>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="被签名数据：">
          <div class="wordWrap">
            {{ DetailObj.evidenceData }}
          </div>
        </el-form-item>
        <el-form-item label="签名：">
          <div class="wordWrap">
            {{ DetailObj.signature }}
            <el-button @click.prevent="checkSign" type="primary"
              >验签</el-button
            >
          </div>
        </el-form-item>
        <el-form-item label="公钥：">
          {{ DetailObj.pubKey }}
        </el-form-item>
        <el-form-item label="取证函：">
          <span
            style="color: #2a82e4; cursor: pointer"
            v-down="{ url: DetailObj.evidenceCert, fileName: '取证函.png' }"
          >
            {{ DetailObj.evidenceCert ? "取证函.png" : "--" }}
          </span>
        </el-form-item>
        <el-form-item label="文件信息：">
          <div
            class="file_cn"
            v-for="(item, index) in DetailObj.fileList"
            :key="index"
          >
            <div>文件名称:{{ item.fileName }}</div>
            <div>文件url:{{ item.fileUrl }}</div>
            <div>文件哈希:{{ item.fileHash }}</div>
          </div>
        </el-form-item>

        <el-dialog
          title="验签"
          :close-on-click-modal="false"
          :model-value="checkSignDialogVisible"
          :destroy-on-close="true"
          @close="clearSignForm"
        >
          <el-tooltip
            effect="light"
            :content="DetailObj.evidenceData"
            placement="top"
          >
            <div class="Sign_content">
              <div class="Sign_content_key">被签名数据：</div>
              <div class="Sign_content_data">{{ DetailObj.evidenceData }}</div>
            </div>
          </el-tooltip>
          <el-tooltip
            effect="light"
            :content="DetailObj.signature"
            placement="top"
          >
            <div class="Sign_content">
              <div class="Sign_content_key">签名：</div>
              <div class="Sign_content_data">{{ DetailObj.signature }}</div>
            </div>
          </el-tooltip>
          <el-tooltip
            effect="light"
            :content="DetailObj.pubKey"
            placement="top"
          >
            <div class="Sign_content">
              <div class="Sign_content_key">公钥：</div>
              <div class="Sign_content_data">{{ DetailObj.pubKey }}</div>
            </div>
          </el-tooltip>
          <div class="Sign_content">
            <div class="Sign_content_key">签名算法：</div>
            <div class="Sign_content_data">国密SM2</div>
          </div>
          <div class="Sign_content">
            <div class="Sign_content_key">验签结果：</div>
            <div
              class="Sign_content_data"
              :class="
                checkSignStatus === '验签成功'
                  ? 'green'
                  : checkSignStatus === '验签失败'
                  ? 'red'
                  : '--'
              "
            >
              {{ checkSignStatus }}
            </div>
          </div>

          <div slot="footer" class="dialog-footer center">
            <el-button
              @click.prevent="checkSignDialogVisible = false"
              type="primary"
              >确定</el-button
            >
            <el-button plain @click="checkSignDialogVisible = false"
              >取消</el-button
            >
          </div>
        </el-dialog>
      </el-form>
    </div>
  </div>
</template>
<script setup>
import { reactive, ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { detailEvidenceObtain } from "@/api/obtainEvidence";
import { ElMessage } from "element-plus";
import { evidenceSignatureDecrypt } from "@/api/existingEvidence";
import { deepJSON } from "@/utils/tool";
const router = useRouter();
const route = useRoute();
const checkSignDialogVisible = ref(false);
const backList = () => {
  router.go(-1);
};
const DetailForm = reactive({});
const DetailObj = ref({});
const formatTxContent = ref({});
const checkSignStatus = ref("");
const clearSignForm = () => {
  checkSignDialogVisible.value = false;
};
const checkSign = async () => {
  let parmars = {
    evidenceData: DetailObj.value.evidenceData,
    signature: DetailObj.value.signature,
    pubKey: DetailObj.value.pubKey,
  };
  checkSignDialogVisible.value = true;
  const { success, msg } = await evidenceSignatureDecrypt(parmars);
  if (success) {
    checkSignStatus.value = msg || "验签成功";
    // ElMessage.success(msg || "验签成功");
  } else {
    checkSignStatus.value = msg || "验签失败,请稍后再试";
    // ElMessage.error(msg || "验签失败,请稍后再试");
  }
};
const DocumentDetailInfo = async () => {
  let parmars = {
    evidenceId: route.query.id,
  };
  const { success, msg, data } = await detailEvidenceObtain(parmars);
  if (success) {
    DetailObj.value = data || {};
    formatTxContent.value = deepJSON({}, JSON.parse(DetailObj.value.txContent));
  } else {
    ElMessage.error(msg || "明细获取失败,请稍后再试");
  }
};
DocumentDetailInfo();
</script>

<style lang="scss" scoped>
@import "../../assets/css/cindex.scss";
@import "../../assets/css/position";
@import "../../assets/css/dialog";
:deep .el-upload-list--picture-card .el-upload-list__item-actions span + span {
  margin-left: 0.5em;
}
.add_icon {
  font-size: 18px;
  // margin-left: 10px;
  cursor: pointer;
  height: 100%;
}
.delete_icon {
  font-size: 18px;
  margin-left: 10px;
  cursor: pointer;
  height: 100%;
}
.file_cn {
  // width: 130px;
  width: 100%;
  font-size: 14px;
  //   text-align: right;
  // margin-left: 70px;
  margin-bottom: 5px;
  padding: 10px;
  border-radius: 4px;
  border: 1px dashed #a6a6a6;
  div {
    margin-bottom: 15px;
  }
}
.box {
  display: flex;
  .left_txContent {
    width: 50%;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #d6e9c6;
    word-break: break-word;
    margin-right: 10px;
  }
  .rigth_txContent {
    width: 50%;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #d6e9c6;
    word-break: break-word;
  }
}
.wordWrap {
  word-break: break-word;
}
.el-form-item .el-form-item {
  margin-bottom: 20px;
}
.ci_content {
  width: calc(100% - 32px);
}
.Sign_content {
  display: flex;
  font-size: 14px;
  // margin-bottom: 18px;
  .Sign_content_key {
    display: inline-flex;
    justify-content: flex-end;
    align-items: flex-start;
    flex: 0 0 auto;
    height: 32px;
    line-height: 32px;
    padding: 0 12px 0 0;
    box-sizing: border-box;
    width: 100px;
  }
  .Sign_content_data {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex: 1;
    line-height: 32px;
    position: relative;
    min-width: 0;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
}
.red {
  color: red;
}
.green {
  color: green;
}
</style>
